<template>
    <div class="heightAll widthAll home" id="ding">
        <top tar="ding"/>
        <div class="widthAll" style="margin-bottom: 10px;">
            <el-select clearable placeholder="借阅状态" style="margin-right: 15px;" v-model="borrow.status">
                <el-option
                        :key="status.value"
                        :label="status.name"
                        :value="status.value"
                        v-for="status in [{name:'已还',value:true},{name:'未还',value:false}]"> <!--就两种选择-->
                </el-option>
            </el-select>
            <el-button @click="search" icon="el-icon-search" type="primary">搜索</el-button>
            <el-button @click="returnHome" icon="el-icon-back" type="primary">返回</el-button>
        </div>
        <el-table :data="getBorrowsList" class="el-table"
                  header-align="center" stripe style="width: 100%; text-align: center">
            <el-table-column label="编号" prop="id" width="100">
            </el-table-column>
            <el-table-column label="书籍ID" prop="bookId" width="100">
                <template slot-scope="scope">
                    <!--鼠标放在上面，就会冒出一段文本框，在table中要设置 slot-->
                    <!--内容是bookMap中bookId对应的书名-->
                    <el-tooltip :content="bookMap.get(scope.row.bookId)" effect="light"
                                placement="top-start" transition="el-fade-in-linear">
                        <span>{{scope.row.bookId}}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="用户ID" prop="userId" width="100">
            </el-table-column>
            <el-table-column label="借书时间" width="220">
                <template slot-scope="scope">
                    <!--一般来说，在table中加其他组件就需要 slot-scope-->
                    <i class="el-icon-time"></i>
                    <!--这个方法很重要，就定义在本文件中，后台java 返回的是 Date 类型-->
                    <span style="margin-left: 10px">{{formatDate(new Date(scope.row.borrowTime))}}</span>
                </template>
            </el-table-column>
            <el-table-column label="还书时间" prop="returnTime" width="220">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <!--需判断是否为null-->
                    <span style="margin-left: 10px">{{ scope.row.returnTime ? formatDate(new Date(scope.row.returnTime)) : ''}}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" style="" width="120">
                <template slot-scope="scope">
                    <!--标签文本-->
                    <el-tag :type="scope.row.status ? 'success':'warning' "
                            style="text-align: center;"><span
                            style="float: left;">{{scope.row.status ? '已还':'未还'}}</span>
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!--还了书不显示-->
                    <el-button @click="returnBook(scope.row)" size="mini" type="primary" v-if="!scope.row.status">还书
                    </el-button>
                    <el-button @click="deleteById(scope.row)" size="mini" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <!--分页组件-->
        <el-pagination :current-page="borrow.pageNo"
                       :page-size="borrow.pageSize"
                       :page-sizes="[5,10,15]"
                       :total="getBorrowsCount"
                       @current-change="change"
                       @size-change="handleSizeChange"
                       background
                       class="my-changePage"
                       layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
</template>

<script>
import borrowInfo from "../../store/borrowInfo";
import common from "../../store/common";
import bookInfo from "../../store/bookInfo";
import top from '@/components/backToTop'

export default {
    name: 'borrows',
    methods: {
        //还书
        returnBook(row) {
            borrowInfo.dispatch('returnBook', row.id).then((rs) => {
                if (!rs.rs && rs.msg) {
                    this.$message.warning(rs.msg);
                } else {
                    common.afterUpdateActions(this, rs.rs, '还书', null, false);
                }
            });
        },
        //Date格式化
        formatDate(date) {
            return common.dateFormat(date);
        },
        //获取个人借阅列表，java中取的是session中的userId
        getBorrows() {
            if (!this.isSearching) {
                this.borrow.status = null;
            }
            borrowInfo.dispatch('queryBorrows', this.borrow).then(rs => {
                const _this = this;
                //遍历借阅数据列表，需要then中
                _this.getBorrowsList.forEach(function (Item) { //获取所有书籍id
                    _this.getBookName(Item.bookId); //此时this不是vue，需要传进来
                });
            });
        },
        returnHome() {
            window.location.reload(); //重新加载页面的
        },
        /*搜索功能*/
        search() {
            const _this = this;
            if (_this.borrow.status != null && _this.borrow.status.length === 0)
                _this.borrow.status = null;
            _this.isSearching = true;
            _this.borrow.pageNo = 1;
            _this.getBorrows();
        },
        handleSizeChange(size) {
            this.borrow.pageSize = size;
            this.getBorrows();
        },
        change(currentPage) { //换页，点击页码
            this.borrow.pageNo = currentPage;
            this.getBorrows();
        },
        deleteById(row) {
            borrowInfo.dispatch('deleteBorrowRecord', row.id).then((rs) => {
                if (!rs.rs && rs.msg) {
                    this.$message.warning(rs.msg);
                } else {
                    common.afterUpdateActions(this, rs.rs, '删除记录', null, false);
                }
            });
        },
        getBookName(bookId) {
            bookInfo.dispatch('queryBookById', bookId).then((rs) => {
                /*我草， map数据结构要这么写，才能同步更新，我之前只set*/
                this.bookMap.set(bookId, rs.name);
                this.bookMap = new Map(this.bookMap);
            }).catch(() => {
                this.bookMap.set(bookId, 'unknown');
                this.bookMap = new Map(this.bookMap);
            })
        }
    },
    data() {
        return {
            isSearching: false,
            borrow: {
                status: null,
                pageNo: 1,
                pageSize: 5,
            },
            bookMap: new Map(),
        }
    },
    mounted() {
        this.getBorrows();
    },
    computed: { /*之前错写成了 (){*/
        getBorrowsList: function () {
            return borrowInfo.getters.getBorrows;
        }, getBorrowsCount: function () {
            return borrowInfo.getters.getTotal;
        }
    }, components: {
        top
    }
}

</script>

<style scoped>
    .my-changePage {
        font-family: 微软雅黑, sans-serif;
        font-weight: normal;
    }
</style>